<template>
  <div class="container">
    <div :class="getItemClass(index)" v-for="(item, index) in 5" :key="index">{{ index + 1 }}</div>
  </div>
</template>

<script setup>
const getItemClass = (index) => {
  return ['item', `item-${index + 1}`]
}
</script>

<style lang="scss" scoped>
// 无边框情况
// .container {
//   padding: 5px;
//   width: 400px;
//   height: 400px;
//   display: flex;
//   flex-direction: column;
//   flex-wrap: wrap;
// }
// .container .item {
//   color: #000;
//   width: 50%;
//   height: calc(100% / 3);
// }
// .container .item-1,
// .container .item-2 {
//   height: calc(100% / 2);
// }
// .item-1 {
//   background-color: pink;
// }
// .item-2 {
//   background-color: black;
// }
// .item-3 {
//   background-color: purple;
// }
// .item-4 {
//   background-color: blueviolet;
// }
// .item-5 {
//   background-color: aqua;
// }
</style>
